<template>
  <div id="importOver">
    <div class="icon_result">
      <img src="@/assets/images/import_success.png" alt="导入成功" v-if="resData.successCount > 0" />
      <img src="@/assets/images/import_error.png" alt="导入失败" v-else />
      <span class="result_status" v-if="resData.successCount > 0">导入成功</span>
      <span class="result_status" v-else>导入失败</span>
      <span class="result_message">
        <template v-if="resData.successCount > 0">
          <span class="successCount">{{ resData.successCount }}</span
          >条数据导入成功;
        </template>
        <template v-if="resData.errorCount > 0">
          <span class="errorCount">{{ resData.errorCount }}</span
          >条数据导入失败;
        </template>
      </span>
    </div>
    <div class="errorFun" v-if="resData.errorCount > 0">
      <p class="title">修改错误数据</p>
      <p class="content">方法一: <span class="onlineUpdate btn" @click="onlineUpdate">在线修改</span></p>
      <p class="content">方法二: 请<span class="download btn" @click="downloadErrorInfo">下载失败数据</span>,修改后<span class="reloadImport btn" @click="reImport">重新导入</span></p>
      <p class="tips content">失败数据中包含失败的数据和原因，您可以修改后重新导入。</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "importOver",
  props: {
    resData: {
      type: Object,
    },
    isEdit: {
      type: Boolean,
    },
    moduleCode: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    reImport() {
      this.$emit("reload");
    },
    downloadErrorInfo() {
      let data = [];
      this.resData.excelDataset.tables.forEach((item) => {
        let table = {};
        table.tableName = item.tableName;
        table.rows = [];
        item.rows.forEach((rowItem) => {
          let row = { cells: [] };
          let keys = Object.keys(rowItem);
          keys.forEach((key) => {
            if (key != "ErrorCells" && key != "ErrorMsg" && key != "ErrorDetails" && key != "rowIndex" && key != "_XID") {
              row.cells.push({
                key: key,
                value: rowItem[key],
              });
            }
          });
          table.rows.push(row);
        });
        data.push(table);
      });
      this.$api.importUser.ExportErrorData({ isEdit: this.isEdit, moduleCode: this.moduleCode, data: data }).then((res) => {
        const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = blobUrl;
        a.download = `错误信息.xlsx`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(blobUrl);
      });
    },
    onlineUpdate() {
      this.$emit("activeChange", 2);
    },
  },
};
</script>
<style lang="less" scoped>
#importOver {
  width: 100%;
  justify-content: center;
  display: flex;
  flex-flow: column;
  align-items: center;
  .icon_result {
    display: flex;
    flex-flow: column;
    align-items: center;
    img {
      width: 110px;
      height: 110px;
      margin-bottom: 35px;
    }
    .result_status {
      font-weight: 600;
      margin-bottom: 8px;
    }
    .result_message {
      letter-spacing: 1.2px;
      .successCount {
        color: #62af6e;
      }
      .errorCount {
        margin-left: 3px;
        color: #fc5972;
      }
    }
  }
  .errorFun {
    margin-top: 55px;
    background-color: #f5fafe;
    width: 60%;
    height: 185px;
    padding: 20px;
    .title {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 20px;
    }
    .content {
      font-size: 14px;
      .btn {
        color: #39a4ed;
        cursor: pointer;
      }
    }
    .tips {
      color: #9a9ea1;
      margin-top: 20px;
    }
  }
}
</style>
